<template>
    <ul class='commonUl'>
        <li>
            <router-link to="/" class="link">首页</router-link>
        </li>
        <li v-for="(item, key) in getList" :key="item.id">
            <p @click="two(item.id, key)" > {{ item.name }}
            </p>
            <div class="box1">
                <div class="one">
                    <div class="a" v-for="it in item.children" :key="it.id" @click="sub(it.id)">
                        <div class="two">
                            <img v-lazy="it.picture">
                            <span>{{ it.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>


<script>
export default {
    data() {
        return {
            flag: -1,
            rid: null,
            zid:null,
            flag1: true
        }
    },
    mounted() {
        this.$store.dispatch('getCate')

    },
    computed: {
        getList() {
            return this.$store.state.list
        }
    },
    methods: {
        two(id, key) {
            // this.$router.push('/cate?id=' + id)
            if (this.rid != id) {
                this.$router.push('/cate?id=' + id)
                this.rid = id
            } else {
                return false
            }
            this.$store.commit('addKey', key)
        },
        sub(id){
            if (this.zid != id) {
                this.$router.push('/sub?id=' + id)
                this.zid = id
            } else {
                return false
            }
        }
    }
}
</script>


<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.keyss {
    color: $xtxColor;
    border-bottom: 1px solid $xtxColor;
}

.commonUl {
    width: 820px;
    background: white;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    position: relative;
    z-index: 999;

    >li {
        margin-right: 40px;
        width: 38px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        >p {
            font-size: 16px;
            line-height: 32px;
            height: 32px;
            display: inline-block;
        }

        &:hover {
            >p {
                color: $xtxColor;
                border-bottom: 1px solid $xtxColor;
            }

            >.box1 {
                height: 132px;
                opacity: 1;
            }
        }
    }
}

.link {
    color: black;
    text-decoration: none;
}

.link:hover {
    color: $xtxColor;
    border-bottom: 1px solid $xtxColor;
}

.box1 {
    z-index: 999;
    width: 1240px;
    background-color: #fff;
    position: absolute;
    left: -200px;
    top: 56px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 0 5px #ccc;
    transition: all .2s .1s;

    .one {
        display: flex;
        flex-wrap: wrap;
        padding: 0 70px;
        align-items: center;
        height: 132px;

        .two {
            width: 110px;
            // text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 60px;
                height: 60px;
            }

            span {
                padding-top: 10px;
            }

            &:hover {
                span {
                    color: $xtxColor;
                }
            }
        }
    }
}
</style>



<!-- <template>
    <ul class="commonnavs">
        <li class="home">
            <RouterLink to="/" >首页</RouterLink>
        </li>
        <li v-for="item in catelist" :key="item.id">
            <a href="#">{{ item.name }}</a>
            <div class="layer">
                <ul>
                    <li v-for="it in item.children" :key="it.id">
                        <a href="#">
                            <img :src="it.picture" alt="">
                            <p>{{ it.name }}</p>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</template>
<script>
export default {
    computed: {
        catelist() {
            return this.$store.state.list
        }
    }
}
</script>
<style lang="scss" scope>
@import "@/assets/css/variables.scss";

.commonnavs {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    position: relative;

    >li {
        margin-right: 40px;
        width: 38px;
        text-align: center;

        >a {
            font-size: 16px;
            line-height: 32px;
            height: 32px;
            display: inline-block;
        }

        &:hover {
            >a {
                color: $xtxColor;
                border-bottom: 1px solid $xtxColor;
            }

            >.layer {
                height: 132px;
                opacity: 1;
            }
        }
    }
}

.layer {
    z-index: 999;
    width: 1240px;
    background-color: #fff;
    position: absolute;
    left: -200px;
    top: 56px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 0 5px #ccc;
    transition: all .2s .1s;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 70px;
        align-items: center;
        height: 132px;

        li {
            width: 110px;
            text-align: center;

            img {
                width: 60px;
                height: 60px;
            }

            p {
                padding-top: 10px;
            }

            &:hover {
                p {
                    color: $xtxColor;
                }
            }
        }
    }
}
</style> -->

